<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.6.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			li{list-style: none;}
			.bank4{width: 100%;height: 136px;background: #47b57a;margin-bottom: 42px;} 
			.bank4 ul{width: 1165px;height: 136px;margin: 0 auto;padding-left: 10px;}
			.bank4 ul li{float: left;height: 136px;width: 72px;position: relative;}
			.bank4 ul li img{display: block;margin: 0 auto;margin-top: 30px;position: absolute;left: 15px;top: 30px; width: 48px;height: 48px;}
			.bank4 ul li p{width: 72px; color: white;text-align: center;height: 30px;line-height: 30px;position: absolute;top: 90px;}
		</style>
		<script type="text/javascript">
			$(function(){
					var oShowLove_li= $('.bank4 li img');//图文列表项
					var oShowLove_json1={'width':'60','height':'60','marginLeft':'-6','marginTop':'-6'};
					var oShowLove_json2={'width':'48','height':'48','marginLeft':'0','marginTop':'0'}
					position(oShowLove_li,oShowLove_json1,oShowLove_json2);
					/*将图片放大缩小的函数*/
					 var iMinZindex=1;//设置一个zindex
					function position(obj,json1,json2){//将图片放大缩小的函数
						/*for(var i=0;i<obj.length;i++){//获取位置信息
							obj[i].style.left=obj[i].offsetLeft+'px';
							obj[i].style.left=obj[i].offsetTop+'px';
						}*/
						for(var i=0;i<obj.length;i++){//设置为绝对定位并固定好位置
							obj[i].style.position='absolute';
							obj[i].style.margin=0;
						}
						for(var i=0;i<obj.length;i++){
							obj[i].onmouseover=function(){//当鼠标移到每个列表项时图片都变大
								this.style.zIndex=iMinZindex++;
								startMove(this,json1)
							}
							obj[i].onmouseout=function(){//当鼠标移开每个列表项时图片变正常
								startMove(this,json2)
							}
						}
					}
					
					function startMove(obj,json,endFn){
	
							clearInterval(obj.timer);
							
							obj.timer = setInterval(function(){
								
								 obj.bBtn = true;
								
								for(var attr in json){
									
									var iCur = 0;
								
									if(attr == 'opacity'){
										if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
										iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
										
										}
										else{
											iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
										}	
									}
									else{
										iCur = parseInt(getStyle(obj,attr)) || 0;
									}
									
									var iSpeed = (json[attr] - iCur)/8;
								iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
									if(iCur!=json[attr]){
										obj.bBtn = false;
									}
									
									if(attr == 'opacity'){
										obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
										obj.style.opacity = (iCur + iSpeed)/100;
										
									}
									else{
										obj.style[attr] = iCur + iSpeed + 'px';
									}
									
									
								}
								
								if(obj.bBtn){
									clearInterval(obj.timer);
									
									if(endFn){
										endFn.call(obj);
									}
								}
								
							},30);
						
						}
					function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}
				})
		</script>
	</head>
	<body>
		<div class="bank4">
				<ul>   
					<li><a href=""><img src="link2/1.png"/><p>校长室</p></a></li>
					<li><a href=""><img src="link2/2.png"/><p>EMIS</p></a></li>
					<li><a href=""><img src="link2/3.png"/><p>办公OA</p></a></li>
					<li><a href=""><img src="link2/4.png"/><p>视频中心</p></a></li>
					<li><a href=""><img src="link2/5.png"/><p>集团办公中心</p></a></li>
					<li><a href=""><img src="link2/6.png"/><p>班班通</p></a></li>
					<li><a href=""><img src="link2/7.png"/><p>人人通</p></a></li>
					<li><a href=""><img src="link2/8.png"/><p>安全督查</p></a></li>
					<li><a href=""><img src="link2/9.png"/><p>教师发展中心</p></a></li>
					<li><a href=""><img src="link2/10.png"/><p>食堂管理</p></a></li>
					<li><a href=""><img src="link2/11.png"/><p>教育装备</p></a></li>
					<li><a href=""><img src="link2/12.png"/><p>备课中心</p></a></li>
					<li><a href=""><img src="link2/13.png"/><p>学生成长中心</p></a></li>
					<li><a href=""><img src="link2/14.png"/><p>教师空间</p></a></li>
					<li><a href=""><img src="link2/15.png"/><p>课题管理</p></a></li>
					<li><a href=""><img src="link2/16.png"/><p>网络存储</p></a></li>
				</ul>
			</div>
	</body>
</html>
